<template>
  <div class="management-right">
    <!-- 上 -->
    <div class="management-right-top">
      <h4>近一年管理维护告警排名</h4>
      <!-- 切换选项卡 -->
      <el-tabs v-model="activeNameAll">
        <!-- 全部 -->
        <el-tab-pane label="全部"
                     name="first">
          <div class="rowAll"
               v-for="item in dataAll"
               :key="item.id"
               :class="item.id <= 3 ? 'strong' : ''">
            <div>
              <div class="rowAll-num">{{item.id}}.</div>
              {{item.space}}
            </div>
            <i>{{item.time}}次</i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="水浸"
                     name="second">
          <div class="rowAll"
               v-for="item in dataAll"
               :key="item.id"
               :class="item.id <= 3 ? 'strong' : ''">
            <div>
              <div class="rowAll-num">{{item.id}}.</div>
              {{item.space}}
            </div>
            <i>{{item.time}}次</i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="火灾"
                     name="third">
          <div class="rowAll"
               v-for="item in dataAll"
               :key="item.id"
               :class="item.id <= 3 ? 'strong' : ''">
            <div>
              <div class="rowAll-num">{{item.id}}.</div>
              {{item.space}}
            </div>
            <i>{{item.time}}次</i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="空气"
                     name="fourth">
          <div class="rowAll"
               v-for="item in dataAll"
               :key="item.id"
               :class="item.id <= 3 ? 'strong' : ''">
            <div>
              <div class="rowAll-num">{{item.id}}.</div>
              {{item.space}}
            </div>
            <i>{{item.time}}次</i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="人流"
                     name="fifth">
          <div class="rowAll"
               v-for="item in dataAll"
               :key="item.id"
               :class="item.id <= 3 ? 'strong' : ''">
            <div>
              <div class="rowAll-num">{{item.id}}.</div>
              {{item.space}}
            </div>
            <i>{{item.time}}次</i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="车流"
                     name="sixth">
          <div class="rowAll"
               v-for="item in dataAll"
               :key="item.id"
               :class="item.id <= 3 ? 'strong' : ''">
            <div>
              <div class="rowAll-num">{{item.id}}.</div>
              {{item.space}}
            </div>
            <i>{{item.time}}次</i>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 下 -->
    <div class="management-right-bottom">
      <h4>今日检测设备告警</h4>
      <div class="rowCallPolice"
           :key="item.id"
           v-for="item in todayCallPoliceData">
        <img :src="item.url"
             alt />
        <strong>{{item.type}}</strong>
        <span>{{item.date}}</span>
        <span>{{item.time}}</span>
        <p>{{item.space}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'manage-right',
  data () {
    return {
      //Tab默认打开项（全部栏）
      activeNameAll: "first",
      //Tab栏(全部栏)的数据
      dataAll: [
        {
          id: 1,
          space: "新街口地下城",
          time: 23
        },
        {
          id: 2,
          space: "湖南路",
          time: 18
        },
        {
          id: 3,
          space: "河西中心地下城",
          time: 17
        },
        {
          id: 4,
          space: "夫子庙",
          time: 16
        },
        {
          id: 5,
          space: "南湖地下广场",
          time: 15
        },
        {
          id: 6,
          space: "南湖地下广场",
          time: 14
        },
        {
          id: 7,
          space: "南湖地下广场",
          time: 13
        },
        {
          id: 8,
          space: "南湖地下广场",
          time: 12
        },
        {
          id: 9,
          space: "南湖地下广场",
          time: 11
        },
        {
          id: 10,
          space: "江浦中心地下城",
          time: 11
        },
        {
          id: 11,
          space: "栖霞地下广场",
          time: 11
        },
        {
          id: 12,
          space: "浦口地下广场",
          time: 11
        },
        {
          id: 13,
          space: "夫子庙地下广场",
          time: 11
        }
      ],
      //今日检测设备告警的数据
      todayCallPoliceData: [
        {
          id: 1,
          date: "2-11",
          url: require("@/static/image/4/浸水警告.png"),
          type: "水浸告警",
          time: '08:12:25',
          space: "新街口地下通道F口走廊"
        },
        {
          id: 2,
          date: "2-11",
          url: require("@/static/image/4/人流警告.png"),
          type: "人流告警",
          time: '08:12:25',
          space: "湖南路地下商场"
        },
        {
          id: 3,
          date: "2-11",
          time: '08:12:25',
          url: require("@/static/image/4/烟雾警告.png"),
          type: "火灾告警",
          space: "新街口地下通道F口走廊"
        },
        {
          id: 4,
          date: "2-11",
          time: '08:12:25',
          url: require("@/static/image/4/空气警告.png"),
          type: "空气CO浓度过高告警",
          space: "新街口地下通道F口走廊"
        }
      ]
    }
  }
}
</script>
<style lang="scss">
$precent: 100vw / 1920;
.management-right {
  width: 483 * $precent;
  h4 {
    width: 100%;
    text-align: left;
    font-weight: 100;
    margin-left: 50 * $precent;
  }
  h4::before {
    content: "";
    border: 5 * $precent solid #fff000;
    height: 16 * $precent;
    margin-right: 10 * $precent;
  }
  .management-right-top {
    height: 740 * $precent;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background: url("../../static/image/4/内容底图-4.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    // position: relative;

    .el-tabs {
      // position: absolute;
      // top:
      width: 430 * $precent;
      .el-tabs__header {
        background: url("../../static/image/4/tap.png") no-repeat;
        background-size: 100% 100%;
      }
      .el-tabs__item .is-top:nth-child(1) {
        width: 90 * $precent !important;
      }
      .el-tabs__nav-scroll {
        display: flex;
        justify-content: space-around;
      }
      .el-tabs__nav-wrap::after {
        display: none;
      }
      .el-tabs__active-bar {
        display: none;
      }
      .el-tabs__item {
        width: 71 * $precent;
        padding: 0;
        color: #487b92;
      }
      .el-tabs__nav > div:nth-child(2).is-active {
        margin-bottom: 5 * $precent;
        color: #fff;
        background: url("../../static/image/4/选中1.png") no-repeat;
        background-size: 100% 100%;
      }
      .is-active {
        margin-bottom: 5 * $precent;
        color: #fff;
        // background:linear-gradient(to bottom,#4d8fc4,#05c7c6);
        background: url("../../static/image/4/选中2.png") no-repeat;
        background-size: 100% 100%;
      }
      .el-tabs__nav > div:nth-child(7).is-active {
        margin-bottom: 5 * $precent;
        color: #fff;
        background: url("../../static/image/4/选中3.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .el-tab-pane > div {
      height: 45 * $precent;
      line-height: 45 * $precent;
      background: url("../../static/image/4/排名以下.png") no-repeat;
      background-size: 100% 100%;
    }
    .el-tab-pane > div:nth-child(1) {
      height: 50 * $precent;
      background: url("../../static/image/4/排名1.png") no-repeat;
      background-size: 100% 100%;
    }
    .el-tab-pane > div:nth-child(2) {
      height: 50 * $precent;
      background: url("../../static/image/4/排名2.png") no-repeat;
      background-size: 100% 100%;
    }
    .el-tab-pane > div:nth-child(3) {
      height: 50 * $precent;
      background: url("../../static/image/4/排名3.png") no-repeat;
      background-size: 100% 100%;
    }
    .rowAll {
      display: flex;
      justify-content: space-between;
      padding: 0 40 * $precent 0 10 * $precent;
      .rowAll-num {
        display: inline-block;
        width: 30 * $precent;
        margin-right: 10 * $precent;
        margin-left: -2 * $precent;
      }
      i {
        font-style: normal;
      }
    }
  }
  .management-right-bottom {
    height: 270 * $precent;
    width: 100%;
    background: url("../../static/image/4/内容底图-5.png") no-repeat;
    background-size: 100% 100%;
    padding: 10 * $precent;
    box-sizing: border-box;
    h4 {
      margin-left: 25 * $precent;
    }
    .rowCallPolice {
      background: url("../../static/image/4/报警条例底图.png") no-repeat;
      margin: 0 * $precent 10 * $precent 8 * $precent 20 * $precent;
      background-size: 100% 100%;
      height: 32 * $precent;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-left: 10 * $precent;
      > img {
        width: 20 * $precent;
        height: 20 * $precent;
      }
      > strong {
        width: 10em;
        text-align: left;
        font-size: 16 * $precent;
        color: #f83032;
      }
      > span {
        color: #eba6a6;
        font-size: 12 * $precent;
      }
      > p {
        width: 12em;
        font-size: 12 * $precent;
        color: #f79f63;
      }
    }
  }
}
</style>